<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        /*圆形*/
        .d1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
            clip-path: circle(50%);
        }

        /* 圆的位置 */
        .d1-2 {
            width: 300px;
            height: 300px;
            background-color: blue;
            border: 3px solid red;
            margin-top: 20px;
            clip-path: circle(50px at 100px 25px);
        }

        /* 椭圆 */
        .d1-3 {
            width: 300px;
            height: 300px;
            background-color: blue;
            border: 3px solid red;
            margin-top: 20px;
            clip-path: ellipse(50px 20px at 100px 40px);
        }

        /*三角形*/
        .d2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
            clip-path: polygon(50% 0, 0 100%, 100% 100%);
        }

        /*矩形*/
        .d3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 20px;
            /*上  左右  下*/
            clip-path: inset(20px 35px 50px);
        }

        /*多边形  菱形*/
        .d3-1 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 20px;
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
        }

        .d3-2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 20px;
            clip-path: polygon(
                    20% 0%,
                    0% 20%,
                    30% 50%,
                    0% 80%,
                    20% 100%,
                    50% 70%,
                    80% 100%,
                    100% 80%,
                    70% 50%,
                    100% 20%,
                    80% 0%,
                    50% 30%
            );
        }

        /*矩形 圆角*/
        .d4 {
            width: 200px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
            clip-path: inset(0 0 0 0 round 30px); /* round 后面接收1-4个参数 */
        }

        /* 矩形 圆角 */
        .d5 {
            width: 200px;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
            clip-path: inset(0 0 0 0 round 20px 10px 50px);
        }

        /* 渐变 */
        .d4 {
            width: 200px;
            height: 200px;
            background: linear-gradient(45deg, #000 50%, transparent 50%);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5"></div>
    <div class="d1-2"></div>
    <div class="d1-3"></div>
    <div class="d3-1"></div>
    <div class="d3-2"></div>
    <div class="d4"></div>


</div>
</body>
</html>